<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
</head>
<body>

    <!--
        双向绑定: v-model
                 只能用在表单元素的value    (别的属性不能使用双向绑定)
                 把表单元素的value, 和对应的Vue中参数建立绑定关系, 相互影响相互改变
                 (表单元素的value改变, 导致data数据的改变;  data数据的改变, 导致双向绑定的表单元素的value的改变)
                 由于, v-model只能绑定到表单元素的value属性上, 所以value字符可省略
    -->

    <div id="root">

        {{text}}
        <div v-bind:title="text">
            div
        </div>
        <input  v-model:value="text">
        <input  v-model="text" >

        <hr>
        <img v-bind:src="url2">
        <input  v-model="url2" >

    </div>
    <script>
        new Vue({
            el: "#root",
            data: {
                text: "123",
                url2: "../dom/作业/1111.png"
            }
        })
    </script>



</body>
</html>
